<template>
  <d2-container >
    <template slot="header">系统基础配置</template>
      <el-tabs v-model="activeName"  type="border-card" tab-position="left">
        <el-tab-pane label="常规配置" name="common">
          <el-form :model="common" ref="common" label-position="left" label-width="100px">
            <el-form-item label="接口地址" prop="devops_addr">
                <div class="demo-input-suffix">
                  <el-input
                    placeholder="用于内部接口调用,如http://127.0.0.1:8000"
                    size="medium"
                    v-model="common.devops_addr">
                  </el-input>
                </div>
            </el-form-item>
            <el-form-item label="终端地址" prop="terminal_addr">
              <div class="demo-input-suffix">
                <el-input
                  placeholder="webssh地址"
                  size="medium"
                  v-model="common.terminal_addr">
                </el-input>
              </div>
            </el-form-item>
          </el-form>
          <el-row>
            <el-button type="primary" icon="el-icon-check" @click="saveForm('common')">保存</el-button>
            <el-button type="success" icon="el-icon-refresh-left" @click="resetForm('common')">重置</el-button>
          </el-row>
          <div class="description top1">
              <el-alert
              title="说明"
              type="success"
              description="常规配置">
            </el-alert>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-message"></i> 邮件设置</span>
          <el-form :model="smtp" ref="smtp" label-position="left" label-width="100px">
              <el-form-item label="SMTP服务器" prop="smtp_server">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="请填写smtp服务器地址"
                  size="medium"
                  v-model="smtp.smtp_server">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="SMTP端口" prop="smtp_port">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="smtp端口，默认为25"
                  size="medium"
                  v-model="smtp.smtp_port">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="SMTP用户" prop="smtp_user">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="smtp登录用户"
                  size="medium"
                  v-model="smtp.smtp_user">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="SMTP密码" prop="smtp_passwd">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="smtp用户密码"
                  size="medium"
                  show-password
                  v-model="smtp.smtp_passwd">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="SSL" prop="smtp_ssl">
                <div>
                  <el-radio-group v-model="smtp.smtp_ssl">
                    <el-radio-button label="OFF">禁用</el-radio-button>
                    <el-radio-button label="ON">启用</el-radio-button>
                  </el-radio-group>
                </div>
              </el-form-item>
          </el-form>
          <el-row>
            <el-button type="primary" icon="el-icon-check" @click="saveForm('smtp')">保存</el-button>
            <el-button type="success" icon="el-icon-refresh-left" @click="resetForm('smtp')">重置</el-button>
            <el-button type="info" icon="el-icon-d-arrow-right">测试</el-button>
          </el-row>
          <div class="description top2">
              <el-alert
              title="说明"
              type="success"
              description="邮件服务器配置，用于发送系统邮件;不使用邮件服务可忽略该配置">
            </el-alert>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-el-icon-s-promotion"></i> 钉钉配置</span>
          <el-form ref="dd" :model="dd" label-position="left" label-width="100px">
              <el-form-item label="app_secret" prop="app_secret">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="钉钉企业内部机器人APP_SECRET，从钉钉开发者后台获取"
                  size="medium"
                  v-model="dd.app_secret">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="超管id" prop="supers">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="超管的钉钉id，向机器人发送命令后可从日志表中查看到；多人以分号隔开"
                  size="medium"
                  v-model="dd.supers">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="全量命令" prop="commands">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="钉钉机器人支持的所有命令"
                  size="medium"
                  v-model="dd.commands">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="超管命令" prop="command_spec">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="仅限超管执行的命令"
                  size="medium"
                  v-model="dd.command_spec">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="webhook" prop="webhook">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="webhook地址，需先进行安全设置"
                  size="medium"
                  v-model="dd.webhook">
                </el-input>
                </div>
              </el-form-item>
          </el-form>
          <el-row>
            <el-button type="primary" icon="el-icon-check" @click="saveForm('dd')">保存</el-button>
            <el-button type="success" icon="el-icon-refresh-left" @click="resetForm('dd')">重置</el-button>
          </el-row>
          <div class="description top3">
              <el-alert
              title="说明"
              type="success"
              description="钉钉配置，用于钉钉机器人和消息通知">
            </el-alert>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-cloudy"></i> 云配置</span>
          <el-form ref="cloud" :model="cloud" label-position="left" label-width="105px">
              <el-form-item label="云类型" prop="cloud_type">
                <el-select v-model="cloud.cloud_type" placeholder="请选择" prop="cloud_type">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="access_id" prop="access_id">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="云服务access_id"
                  size="medium"
                  v-model="cloud.access_id">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="access_secret" prop="access_secret">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="云服务access_secret"
                  size="medium"
                  v-model="cloud.access_secret">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="ssl证书名" prop="cert_name">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="ssl证书名字"
                  size="medium"
                  v-model="cloud.cert_name">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="cdn源地址" prop="cdn_sources">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="cdn源地址"
                  size="medium"
                  v-model="cloud.cdn_sources">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="域名endpoint" prop="domain_endpoint">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="domain_endpoint"
                  size="medium"
                  v-model="cloud.domain_endpoint">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="域名后缀" prop="domain_root">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="domain_endpoint"
                  size="medium"
                  v-model="cloud.domain_root">
                </el-input>
                </div>
              </el-form-item>
          </el-form>
          <el-row>
            <el-button type="primary" icon="el-icon-check" @click="saveForm('cloud')">保存</el-button>
            <el-button type="success" icon="el-icon-refresh-left" @click="resetForm('cloud')">重置</el-button>
          </el-row>
          <div class="description top4">
              <el-alert
              title="说明"
              type="success"
              description="云服务配置，目前只支持华为云">
            </el-alert>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-cloudy"></i> jenkins配置</span>
          <el-form ref="cloud" :model="jenkins" label-position="left" label-width="105px">
              <el-form-item label="jks_url" prop="jenkins">
                <div class="demo-input-suffix">
                  <el-input
                    placeholder="jenkins地址"
                    size="medium"
                    v-model="jenkins.jks_url">
                  </el-input>
                </div>
              </el-form-item>
              <el-form-item label="jks_user" prop="jks_user">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="jenkins用户名"
                  size="medium"
                  v-model="jenkins.jks_user">
                </el-input>
                </div>
              </el-form-item>
              <el-form-item label="jks_password" prop="jks_password">
                <div class="demo-input-suffix">
                <el-input
                  placeholder="jenkins密码"
                  size="medium"
                  v-model="jenkins.jks_password">
                </el-input>
                </div>
              </el-form-item>
          </el-form>
          <el-row>
            <el-button type="primary" icon="el-icon-check" @click="saveForm('jenkins')">保存</el-button>
            <el-button type="success" icon="el-icon-refresh-left" @click="resetForm('jenkins')">重置</el-button>
          </el-row>
          <div class="description top4">
              <el-alert
              title="说明"
              type="success"
              description="云服务配置，目前只支持华为云">
            </el-alert>
          </div>
        </el-tab-pane>
      </el-tabs>
  </d2-container>
</template>

<style>
  .el-input {
    width: 400px;
  }
  .description {
    width: 400px;
    height: 200px;
    position: relative;
    float: right;
  }
  .top1 {
    top: -100px;
  }
  .top2 {
    top: -350px;
  }

  .top3 {
    top: -300px;
  }

  .top4 {
    top: -485px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

<script>
import * as api from './api'

export default {
  name: 'basic',
  created () {
    this.loadData()
  },
  // mixins: [d2CrudPlus.crud],
  data () {
    return {
      activeName: 'common',
      input1: '',
      common: {
        devops_addr: '',
        terminal_addr: ''
      },
      options: [
        { label: '华为云', value: 'hw_cloud'},
        { label: '阿里云', value: 'ali_cloud' }
      ],
      smtp: {
        smtp_server: '',
        smtp_port: 25,
        smtp_user: '',
        smtp_passwd: '',
        smtp_ssl: false
      },
      dd: {
        app_secret: '',
        supers: '',
        commands: '',
        command_spec: '',
        webhook: ''
      },
      cloud: {
        cloud_type: '',
        access_id: '',
        access_secret: '',
        cert_name: '',
        object_type: '',
        cdn_sources: '',
        domain_endpoint: '',
        domain_root: '',
        tags: [
          {
            key: 'add_by',
            value: 'devops'
          }
        ]
      },
      jenkins: {
        jks_url: '',
        jks_user: '',
        jks_password: ''
      }
    }
  },
  methods: {
    loadData () {
      const query = { limit: '9999'}
      api.GetList(query).then((ret) => {
        for (const item of ret.data.data) {
          this[item.type][item.name] = item.value
        }
      })
    },
    saveForm (form) {
      const data = this[form]
      this[form]['type'] = form
      console.log(8888)
      console.log(this[form])
      api.CreateOrUpdateObj(data)
      this.$notify.success({
        title: 'Info',
        message: '保存成功'
      })
    },
    resetForm (formName) {
      console.log(this.$refs[formName])
      this.$refs[formName].resetFields()
      this.$notify.success({
        title: 'Info',
        message: '重置成功'
      })
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
